<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xxJiSuanQi</title>
    <style >
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 50vw;
            background-color:lightgoldenrodyellow;
        }
       .calculator{
	background-color:mediumseagreen;
    padding: 5vw;
    width: 40vw;
    overflow: hidden;
    *zoom: 1;
    border-radius: 5vw;
    box-shadow: -5px -5px 15px -5px rgba(255, 255, 255, .5),5px 5px 15px -5px rgba(0, 0, 0, .3);
       }
          
       .calculator button{
           float: left;
           height: 80px;
           width: 25%;
           padding: 0;
           border: 2px solid #c8c6c9;
           outline: none;
           border-radius: 25px;
           font-size: 20px;
           font-family:fantasy;
           color: #a9a5a3;
           background: linear-gradient(135deg,rgb(255,255,255) 0%,whitesmoke 100%);
       }
       .calculator button:active{
           box-shadow: -5px -5px 10px -5px rgba(255, 255, 255, 1) inset,5px 5px 10px -5px rgba(0, 0, 0, .3) inset;
       }
       .result {
           text-align: right;
           line-height: 80px;
           font-size: 40px;
           font-family: fantasy;
           color:snow;
           padding: 0 10px;
       }
    </style>
</head>
<body>
    <div id="app">
        <div class="calculator">
            <div class="result">{{equation}}</div>
            <!-- 第一行 -->
            <button @click="clear" style="width: 50%;">清除</button>
            <!-- <button @click="calculateChange">+/-</button> -->
            <button @click="calculatePercent">%</button>
            <button @click="append('÷')">÷</button>
            <!-- 第二行 -->
            <button @click="append(7)">7</button>
            <button @click="append(8)">8</button>
            <button @click="append(9)">9</button>
            <button @click="append('×')">×</button>
            <!-- 第三行 -->
            <button @click="append(4)">4</button>
            <button @click="append(5)">5</button>
            <button @click="append(6)">6</button>
            <button @click="append('-')">-</button>
            <!-- 第四行 -->
            <button @click="append(1)">1</button>
            <button @click="append(2)">2</button>
            <button @click="append(3)">3</button>
            <button @click="append('+')">+</button>
    <!-- 第五行 -->
            <button style="width: 50%;" @click="append(0)">0</button>
            <button @click="append('.')">.</button>
            <button @click="calculate">=</button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                equation:'0',
                isEnterDecimals:false,
                isAddOperator:false,
                isStarted:false
            },
            methods:{
                isOperator(symbol){
                    return ['+','-','×','÷'].indexOf(symbol) > -1
                },
                append(symbol){         
                    if (this.equation === '0' && !this.isOperator(symbol)) {
                        if (symbol==='.') {
                            this.equation += '' + symbol
                            this.isEnterDecimals = true
                        }else{
                            this.equation = '' + symbol
                        }
                        this.isStarted=true
                        return
                    }               
                    if (!this.isOperator(symbol)){
                        if (symbol === '.' && this.isEnterDecimals) {
                            return
                        }
                        if (symbol==='.') {
                            this.isEnterDecimals = true
                            this.isAddOperator=true
                        }else{
                            this.isAddOperator=false
                        }
                        this.equation += '' + symbol
                    } 
                    if (this.isOperator(symbol) && !this.isAddOperator){
                        this.equation += '' + symbol
                        this.isEnterDecimals = false
                        this.isAddOperator = true
                    }
                },
                calculate(){
                    let result = this.equation.replace(new RegExp('×','g'),'*').replace(new RegExp('÷','g'),'/')            
                    this.equation = parseFloat(eval(result).toFixed(9)).toString()
                    this.isEnterDecimals=false
                    this.isAddOperator=false
                },
                calculatePercent(){
                    if (this.isAddOperator || !this.isStarted){
                        return
                    }
                    this.equation = this.equation + '* 0.01'
                    this.calculate()
                },
                clear(){
                    this.equation = '0'
                    this.isEnterDecimals = false
                    this.isAddOperator = false
                    this.isStarted = false
                }
            }
        })
    </script>
</body>
</html>